<template>
<div class="select">
  <button ref="buttonClick" type="button" class="btn-select" @click="toggleCheckboxes">
    <div class="buttonLabel">
      共{{selectOptions.length}}项，已选择{{valueSelected.length}}项
      <span class="caret"></span>
    </div>
  </button>
  <div
    class="checkboxLayer"
    :class="{'show': isOpen}"
    v-click-outside="externalClick"
    :style="getPosition">
    <div class="helperContainer"> 
      <div class="line" style="position:relative; margin-bottom: 5px; padding-bottom: 5px;"> 
        <Button
          v-if="!!filters && multi"
          type="primary" 
          size="small"
          @click="selectCurrent(button)"
          v-for="(button, index) in filters"
          :key="index">
            {{button.selectAll ? button.nameNotAll : button.nameAll}}
        </Button>  
        <div style="display: inline-block; vertical-align:middle">
            <Input  
            type="text" 
            size="small"
            style="width: 200px;"
            :placeholder="searchPlaceholder"
            @on-keyup="searchfn"
            v-model="searchInput"
            > 
                <Button  slot="append" icon="ios-search" @click="searchfn"></Button>
            </Input>  
        </div>
      </div>
    </div>
    <div v-if="groups === true">

      <ul class="tab tab-block">
        <li class="tab-item"
          v-for="(tab, index) in globalModel"
          :key="`li${index}`"
          v-show="tab[list].length"
          @click="selectTab(index)" :class="{active : idSelectedTab == index}">
          <span class="pointer">{{tab[groupName]}}</span>
        </li>
      </ul>
    </div>
    <div class="checkBoxContainer"> 
      <ul class="selectList"
        v-for="(tab, index) in globalModel"
        v-show="idSelectedTab == index"
        :key="`list${index}`"
        >
        <li v-for="(option, indexOptions) in tab[list]"
          :key="indexOptions"
          :class="[option[labelDisabled] ? 'disabled' : '', 'selectItem']"
          v-if="option.visible"
          @click="selectOption(option)"
          :style="cssSelected(option)">
          <span class="right margin-right-10"
            v-if="option[labelSelected]">✓</span>
          <p class="margin-left-20 text-overflow" style="max-width: 250px;" :title="option.domain" v-html="renderTemplate(option)">
          </p>
        </li>
      </ul> 
      <div class="selectList"
        v-for="(tab, index) in globalModel"
        v-show="idSelectedTab == index"
        :key="index">
      <div v-if="tab[list].length === 0" class="empty-tab">无数据</div>
      </div>
    </div>
  </div>
</div>
</template>

<script src="./multi-select.js"></script>
<style lang="scss" scoped src="./multi-select.scss"></style>
 
